<template>
  <div class="login-form">
      <!-- v-bind可以简写为 “:” -->
    <el-form ref="loginform" :model="formData" :rules="rules">
      <el-form-item prop="username">
          <el-input v-model="formData.username" placeholder="请输入手机号码"></el-input>
      </el-form-item>
      <el-form-item prop="password">
          <el-input v-model="formData.password" placeholder="请输入密码"></el-input>
      </el-form-item>
    </el-form>
    <!-- 
      justify：规定水平对齐方式
          end:表示向右对齐
     -->
    <el-row type="flex" justify="end">
      <el-button type="text">忘记密码</el-button>
    </el-row>
    <el-button class="login-btn" type="primary" @click="loginFn">登录</el-button>
  </div>
  </template>
  <script>
  export default {
      data(){
          return {
              formData: {
                  // 字段取什么名字 ？可以自定义，但是不建议，一般情况
                  // 我们按照后端的字段名来取名即可,这样方便传值也更加不容易出差
                  username: '', // 手机号码
                  password: '', // 密码
              },
              rules: { 
                  username: [
                      { required: true, message: '请输入手机号码', trigger: 'blur' },
                      { pattern: /^1[3-9]\d{9}$/, message:'手机号格式不正确', trigger:'blur'}
                  ],
                  password: [
                      { required: true, message: '请输入密码', trigger: 'blur'}
                  ]
               }
          }
      },
      methods:{
          loginFn(){
            this.$refs.loginform.validate((valid)=>{
              console.log(valid)
              if(valid){
                console.log('校验通过')
                this.$axios({
                  url: '/accounts/login',
                  method:'post',
                  data: {
                    username: this.formData.username,
                    password: this.formData.password
                  }
                }).then(res=>{
                  console.log('登录成功',res)
                  this.$store.commit('user/SET_UserInfo', res.data)
                  //跳转到首页
                  this.$router.replace('/')
                })
              }else{
                console.log('校验不通过')
              }
            })
          }
      },
      mounted () {
          // 在vue中如果获取组件标签？
          // 答：vue提供refs方法来获取，实现步骤如下：
          // 第一步：给目标组件标签上添加ref属性并赋值，值可以自己取名字
          // 第二步：通过上一步取的ref值来获取，语法：this.$refs.ref名字
          console.log(47,this.$refs.loginform)
      }
  }
  </script>
  <style scoped lang="less">
  .login-form{
      padding: 20px;
  }
  .login-btn{
      width: 100%;
  }
  </style>